<template>
    <div class="chart-middle">
        <div style="margin-top: 12px">{{i18n('form.dataModel','数据模型')}}</div>
        <rx-input-button :showClose="false" :placeholder="i18n('form.dataModel','数据模型','select')"  style="width:100%" v-model="dataModel" @click="openDataModelDialog"></rx-input-button>
        <div class="dimension" style="margin-top: 10px">{{i18n('list.dimension','维度')}}</div>
        <div class="hinder" >
            <a-collapse  :bordered="false" default-active-key="1" v-for="(dimensionobj,index) in modelConfig_.dimensions">
                <template #expandIcon="props">
                    <a-icon type="caret-right" :rotate="props.isActive ? 90 : 0" />
                </template>
                <a-collapse-panel key="1" :header="dimensionobj.tableName">
                    <vuedraggable class="hinder_come" v-model="dimensionobj.fields"  animation="300" dragClass="dragClass" ghostClass="ghostClass" chosenClass="chosenClass"  :group="{name: 'site',pull:'clone',put:'false'}" @start="dimensiononStart2(index)" @end="dimensionend2">
                        <transition-group>
                            <div class="hinder_tuo"  v-for="item in dimensionobj.fields" :key="item.fieldName"><i :class="['iconfont '+item.icon]" style="color:#02c5b7;margin-right: 8px"></i>{{item.fieldLabel}}</div>
                        </transition-group>
                    </vuedraggable>
                </a-collapse-panel>
            </a-collapse>
        </div>
        <div class="dimension">{{i18n('list.measure','度量')}}</div>
        <div class="hinder">
            <a-collapse  :bordered="false" default-active-key="1" v-for="(dimensionobj,index) in modelConfig_.measures">
                <template #expandIcon="props">
                    <a-icon type="caret-right" :rotate="props.isActive ? 90 : 0" />
                </template>
                <a-collapse-panel key="1" :header="dimensionobj.tableName">
                    <vuedraggable class="hinder_come" v-model="dimensionobj.fields"  animation="300" dragClass="dragClass_du" ghostClass="ghostClass" chosenClass="chosenClass"  :group="{name: 'measure',pull:'clone',put:'false'}" @start="measuresStart2(index)" @end="measuresend2">
                        <transition-group>
                            <div class="hinder_tuo-dimensionality"  v-for="item in dimensionobj.fields" :key="item.fieldName"><i :class="['iconfont '+item.icon]" style="color:#9babed;margin-right: 8px"></i>{{item.fieldLabel}}</div>
                        </transition-group>
                    </vuedraggable>
                </a-collapse-panel>
            </a-collapse>
        </div>
    </div>
</template>

<script>
import {Util,RxInputButton} from "@lowcode/jpaas-common-lib";
import ChartDataModelDialog from "@/views/modules/form/core/ChartDataModelDialog";
import vuedraggable from "rx-vuedraggable";
import ChartDataModelApi from "@/api/form/core/chartDataModel";

export default {
    name: "chart-model",
    components: {
        RxInputButton,
        vuedraggable
    },
    props:{
        modelConfig:{
            type:Object,
            default:{}
        },
        config:{
            type:Object,
            default:{}
        }
    },
    data() {
        return {
            dataModel:"",
            //维度拖拽的父级子级的id
            parentId:'',
            childrenId:'',
            //度量拖拽的父级子级的id
            MrParentId:'',
            MrChildrenId:'',
            //接收外部得数据模型配置
            modelConfig_:{}
        }
    },
    created() {
        if(this.modelConfig){
            this.modelConfig_=this.modelConfig;
        }
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "formChartComponent", key);
        },
        init(){
            if (this.config.dataModel) {
                ChartDataModelApi.get(this.config.dataModel).then(res => {
                    if (res.success && res.data && res.data.modelConfig) {
                        if (res.data.dataSource) {
                            this.dataSource = JSON.parse(res.data.dataSource).value;
                        }
                        this.dataModel = JSON.stringify({
                            text: this.config.dataModelName || res.data.name,
                            value: this.config.dataModel
                        });
                        this.modelConfig_=JSON.parse(res.data.modelConfig)
                        this.getTableName();
                        //获取表配置
                        this.tables = JSON.parse(res.data.tables);
                        this.$emit("setModelConfig",this.modelConfig_);
                    }
                });
            }
        },
        getTableName() {
            //添加表判断
            for (var obj of this.modelConfig_.dimensions) {
                if (obj.fields) {
                    for (var obj_children of obj.fields) {
                        this.$set(obj_children, 'tableName', obj.tableName)
                    }
                }
            }
            //添加度量判断
            for (var obj of this.modelConfig_.measures) {
                if (obj.fields) {
                    for (var obj_children of obj.fields) {
                        this.$set(obj_children, 'tableName', obj.tableName)
                    }
                }
            }
        },
        //选择数据模型
        openDataModelDialog(vm){
            var self=this;
            if(this.config.dataModel){
                this.$confirm({
                    title: this.$ti18('rxMsa.actionTips','操作提示'),
                    content: this.i18n('sureSwitch','切换数据模型会清空配置，确定要切换吗？'),
                    okText: this.$ti18('rxForm.ackBtn','确认'),
                    cancelText: this.$ti18('rxForm.cancelBtn','取消'),
                    zIndex:99999,
                    onOk() {
                        self.openDialog(vm);
                    },
                    onCancel() {
                    }
                });
            }else {
                self.openDialog(vm);
            }
        },
        openDialog(vm){
            var self=this;
            Util.open({
                component: ChartDataModelDialog,
                curVm: this,
                widthHeight:['1024px','550px'],
                title: this.i18n('form.dataModel','数据模型'),
                zIndex:10000
            }, function (action,data) {
                if (action != 'ok') return;
                vm.setVal(data.id,data.name);
                self.$emit("getDataModel",data.id);
            });
        },
        dimensiononStart2(index){
            this.parentId = index;
        },
        measuresStart2(index){
            this.MRParentId = index;
        },
        //维度右边拖动触发事件
        dimensionend2(e){
            this.childrenId = e.oldIndex;
            //拖入维度配置
            var index=0;
            for(var obj of this.config.dimensions){
                if( this.modelConfig_.dimensions[this.parentId].fields[this.childrenId].fieldName == obj.fieldName &&
                    this.modelConfig_.dimensions[this.parentId].fields[this.childrenId].tableName == obj.tableName){
                    index++;
                }
            }
            if(index>=2){
                this.config.dimensions.splice(e.newIndex,1);
                this.$notification.open({
                    message: this.$ti18('rxMsa.tips','提示'),
                    description: this.i18n('hasDragged','已经拖入了该字段，不能重复拖入'),
                    onClick: () => {

                    },
                });
            }else if ((this.config.reportType == 'funnel' || this.config.reportType == 'map'|| this.config.reportType == 'radar') && this.config.dimensions.length >= 2) {
                //漏斗图、雷达只能拖入一个
                this.config.dimensions.splice(e.newIndex,1);
                this.$notification.open({
                    message: this.$ti18('rxMsa.tips','提示'),
                    description: this.i18n('exceedOne','不能超过1个'),
                    onClick: () => {

                    },
                });
            }else if(this.config.dimensions.length >3){
                this.config.dimensions.splice(e.newIndex,1);
                this.$notification.open({
                    message: this.$ti18('rxMsa.tips','提示'),
                    description: this.i18n('exceedThree','不能超过3个'),
                    onClick: () => {

                    },
                });
            }

            //拖入颜色图例
            var colorIndex=0;
            for(var obj of this.config.colorLegends){
                if( this.modelConfig_.dimensions[this.parentId].fields[this.childrenId].fieldName == obj.fieldName &&
                    this.modelConfig_.dimensions[this.parentId].fields[this.childrenId].tableName == obj.tableName){
                    colorIndex++;
                }
            }
            if(colorIndex>=2){
                this.config.colorLegends.splice(e.newIndex,1);
                this.$notification.open({
                    message: this.$ti18('rxMsa.tips','提示'),
                    description: this.i18n('hasDragged','已经拖入了该字段，不能重复拖入'),
                    onClick: () => {

                    },
                });
            }else if ((this.config.reportType == 'map'|| this.config.reportType == 'radar') && this.config.colorLegends.length >= 2) {
                //地图、雷达只能拖入一个
                this.config.colorLegends.splice(e.newIndex, 1);
                this.$notification.open({
                    message: this.$ti18('rxMsa.tips','提示'),
                    description: this.i18n('exceedOne','不能超过1个'),
                    onClick: () => {

                    },
                });
            }
            else if(this.config.colorLegends.length >3){
                this.config.colorLegends.splice(e.newIndex,1);
                this.$notification.open({
                    message: this.$ti18('rxMsa.tips','提示'),
                    description: this.i18n('exceedThree','不能超过3个'),
                    onClick: () => {

                    },
                });
            }
            //拖入过滤条件配置
            var filterIndex=0;
            for(var obj of this.config.filterParams){
                if( this.modelConfig_.dimensions[this.parentId].fields[this.childrenId].fieldName == obj.fieldName &&
                    this.modelConfig_.dimensions[this.parentId].fields[this.childrenId].tableName == obj.tableName){
                    filterIndex++;
                }
                //设置默认的条件配置
                if(!obj.condition){
                    this.$set(obj,"condition",{controlType:"textbox", opType:"EQ"});
                }
            }
            if(filterIndex>=2){
                this.config.filterParams.splice(e.newIndex,1);
                this.$notification.open({
                    message: this.$ti18('rxMsa.tips','提示'),
                    description: this.i18n('hasDragged','已经拖入了该字段，不能重复拖入'),
                    onClick: () => {
                    },
                });
            }

        },
        //度量右边拖动触发事件
        measuresend2(e){
            this.MrChildrenId = e.oldIndex;
            var index=0;
            for(var obj of this.config.measures){
                if( this.modelConfig_.measures[this.MRParentId].fields[this.MrChildrenId].fieldName == obj.fieldName
                    && this.modelConfig_.measures[this.MRParentId].fields[this.MrChildrenId].tableName == obj.tableName){
                    index++;
                }
            }
            if(index>=2){
                this.config.measures.splice(e.newIndex,1);
                this.$notification.open({
                    message: this.i18n('dragPrompt','拖拉提示'),
                    description: this.i18n('notRepeat','不可重复拖拉'),
                    onClick: () => {

                    },
                });
            }else if(this.config.reportType=='funnel' && this.config.measures.length>=2){
                //漏斗图只能拖入一个
                this.config.measures.splice(e.newIndex,1);
                this.$notification.open({
                    message: this.$ti18('rxMsa.tips','提示'),
                    description: this.i18n('exceedOne','不能超过1个'),
                    onClick: () => {

                    },
                });
            }
        },
    },
    watch: {
        "config.dataModel":function (val){
            this.init();
        },
        modelConfig: {
            handler: function (val, oldval) {
                this.modelConfig_=val;
            },
            deep: true
        },
    }
}
</script>

<style lang="less">
.hinder_tuo:hover{
    cursor: pointer;
    background-color: #dafaf8;
    border-radius: 2px;
}
.hinder_tuo-dimensionality:hover{
    cursor: pointer;
    background-color: #e5eaff;
    border-radius: 2px;
}
.hinder_tuo , .hinder_tuo-dimensionality{
    padding-left: 10px;
}
.chart-middle {
    .ant-collapse-content-box{
        padding: 0px;
    }
}
.chart-middle{
    .ant-collapse-borderless{
        background-color: white!important;
    }
    .ant-collapse-header{
        padding: 0px 0px 0px 10px!important;
    }
    .ant-collapse-arrow{
        left: -4px!important;
    }
    .ant-collapse-item{
       border: none;
    }
}
.dimension{
    font-size: 14px;
    color: #46494d;
}
.hinder{
    margin-top: 5px;
}
</style>